<template>
	<view class="top-up">
		<view class="isnew-tag" v-if="isNewUser">
			<text>新用户首日</text>
			<text>7折 !</text>
		</view>
		<view class="t1">充值算力</view>
		<view class="t2" :class="{isnew:isNewUser}"><text>￥{{originalPrice}}</text><text
				v-if="isNewUser">￥{{discountedPrice}}</text><text>/&nbsp;&nbsp;算力</text></view>
		<view class="topup-list">
			<radio-group @change="changePackage">
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in packageList" :key="item.id">
					<view class="price">
						<radio :value="item.id" style="transform:scale(0.7)" :checked="item.id == selectPackage" />
						<view><text>{{item.name}}</text></view>
						<view :class="{isnew:isNewUser}"><text>￥{{item.totalOriginalPrice}}</text></view>
						<view v-if="isNewUser" class="newuser"><text>￥{{item.totalDiscountedPrice}}</text>
						</view>
						<view :class="{isnew:isNewUser}"><text>￥{{item.originalPrice}}</text></view>
						<view v-if="isNewUser" class="newuser"><text>￥{{item.discountedPrice}}</text></view>
						<text>/ 算力</text>

					</view>
				</label>
			</radio-group>
		</view>
		<view class="to-pay" @click="$u.debounce(toPay)">
			立即充值
		</view>
	</view>
</template>

<script>
	import {
		getPackageList,
		recharge,
	} from '@/api/my.js'
	import {
		payment
	} from "@/utils/utils.js";
	export default {
		name: "integral",
		data() {
			return {
				isNewUser: false,
				packageList: [],
				selectPackage: '',
				originalPrice: '',
				discountedPrice: '',
			};
		},
		methods: {
			// 获取充值套餐
			getPackageList() {
				getPackageList().then(res => {
					this.isNewUser = res.data.newUser
					this.packageList = res.data.list
					this.selectPackage = this.packageList[1].id
					this.originalPrice = this.packageList[1].originalPrice
					this.discountedPrice = this.packageList[1].discountedPrice
				})
			},
			// 选择套餐
			changePackage(e) {
				this.selectPackage = e.detail.value
				this.packageList.forEach(i => {
					if (i.id == e.detail.value) {
						this.originalPrice = i.originalPrice
						this.discountedPrice = i.discountedPrice
					}

				})
			},
			// 支付
			toPay() {
				recharge({
					packageId: this.selectPackage
				}).then(res => {
					let data = res.data
					payment({
						"provider": data.provider,
						"nonceStr": data.nonceStr,
						"package": data.packageStr,
						"paySign": data.paySign,
						"signType": data.signType,
						"timeStamp": data.timestamp,
					}, () => {

						this.getPackageList()
						this.$emit('payCredit')
					}, () => {
						uni.showToast({
							title: '你已取消充值',
							icon: 'error'
						});
					})
				})
			},
		},
		created() {
			this.getPackageList()
		}
	}
</script>

<style lang="scss">
	.top-up {
		background: #F1F1F1;
		width: calc(100% - 40rpx);
		margin: 20rpx auto;
		overflow: hidden;
		position: relative;

		.t1 {
			font-size: 53rpx;
			font-weight: normal;
			text-align: center;
			color: #3D3D3D;
			margin-top: 20rpx;
		}

		.t2 {
			text-align: center;
			color: #3D3D3D;
			margin-top: 20rpx;

			text:nth-child(-n+2) {
				font-size: 63rpx;
				font-weight: 700;
				position: relative;

			}

			text:last-child {
				font-size: 32rpx;
				font-weight: 400;
				margin-left: 25rpx;
			}

			&.isnew text:nth-child(1) {
				color: #979797;

				&::after {
					content: '';
					position: absolute;
					top: 40rpx;
					left: 0rpx;
					width: 100%;
					border-bottom: 2px solid red;
					transform: rotate(23deg);
				}
			}
		}

		.topup-list {
			margin: 30rpx 45rpx 0rpx;

			.price {
				font-size: 29rpx;
				margin-bottom: 10rpx;
				font-weight: normal;
				display: flex;

				view {
					flex: 3;

					&~text,
					text {
						float: right;
						text-align: left;
						color: #3D3D3D;
						position: relative;
						display: inline-block;
						font-size: 25rpx;
					}

					&~text {
						margin-left: 10rpx;
					}

					&.isnew text {
						color: #979797;

						&::after {
							content: '';
							position: absolute;
							top: 19rpx;
							left: 0rpx;
							width: 100%;
							border-bottom: 2px solid red;
							transform: rotate(23deg);
						}
					}

					&:nth-child(2) text {
						float: left;
					}

					&.newuser {
						flex: 2;
					}
				}

			}
		}

		.to-pay {
			width: 281rpx;
			height: 78.8rpx;
			border-radius: 78rpx;
			font-size: 35rpx;
			box-sizing: border-box;
			text-align: center;
			line-height: 78.8rpx;
			margin: 43rpx auto;
			background-color: #333;
			color: #fff;
		}

		&>.isnew-tag {
			position: absolute;
			width: 0;
			height: 0;
			top: 0;
			right: 0;
			color: #fff;
			border-left: 220rpx solid transparent;
			border-right: 0px solid transparent;
			border-top: 201rpx solid #E80B0B;

			text {
				position: absolute;
				top: -190rpx;
				right: 8rpx;
				font-size: 33rpx;
				width: 200rpx;
				text-align: right;
			}

			text:nth-child(2) {
				font-size: 45rpx;
				top: -140rpx;
				right: 8rpx;
				width: 177rpx;
			}
		}
	}
</style>